<template>
  <div>
    <div>input元素：{{ userName }}</div>
    <input
      type="text"
      :value="userName"
      @input="userName = ($event.target as HTMLInputElement).value"
    />
    <input
      type="text"
      :value="userName"
      @input="userName = (<HTMLInputElement>$event.target).value"
    />
    <br>
    <br>
    <hr>
    <br>

    <div>
      自定义BasicInput：{{ userName }}
      <div>
        <BasicInput v-model="userName"></BasicInput>
        <BasicInput v-model:modelValue="userName"></BasicInput>
        <BasicInput :modelValue="userName" @update:modelValue="userName = $event"></BasicInput>
        <BasicInput :modelValue="userName" @update:modelValue="handleChange"></BasicInput>
      </div>
    </div>
    <br>
    <hr>
    <br>
    <div>
      <h2>多input的双向绑定</h2>
      <div>
        账号：{{ userName }}，密码：{{password}}
        <MultipleInput v-model:ming="userName" v-model:mima="password"/>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import BasicInput from '@views/communication/04_v-model/BaiscInput.vue'
import MultipleInput from '@views/communication/04_v-model/MultipleInput.vue'

const userName = ref('张三')
const password = ref('123456')

const handleChange = (val:string) => {
  userName.value = val
}
onMounted(() => {
  const event = new Event('click')
  console.log('自己创建event：', event)
})
</script>
<style scoped></style>
